<template>
  <div class="box">
    <div class="is-show">
      <div class="pir-title">
        {{name}}
      </div>
      <div class="pirmain" ref="pirmain">

      </div>

      <div class="type-box" v-if="data.length>0">
        <div class="type-item" v-for="(item,index) in data" :key="index" @click="pirNameClick(item)">
          <span class="type-color" :style="{'backgroundColor':color[index]}"></span>
          <span class="type-text">{{item.name}}</span>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
  let echarts = require('echarts')
  export default{
    name:"ck_pie_summary",
    data(){
      return{

      }
    },
    props:{
      data:{
        type:Array,
        default:[]
      },
      color:{
        type:Array,
        default:[]
      },
      name:{
        type:String,
        default:''
      },
      is_click:{
        type:Boolean,
        default:false
      }
    },
    methods:{
      pirNameClick(item){
        if(this.is_click){
          this.$emit("pirNameClick",item)
        }
      },
      initECharts(){
         let dom = this.$refs.pirmain
         let  myChart   = echarts.init(dom);
         let color = this.color
         let data = this.data
         let option = {
              tooltip: {
                  trigger: 'item',
                  formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              series: [{
                  name: '',
                  type: 'pie',
                  radius: '80%',
                  center: ['50%', '50%'],
                  clockwise: false,
                  data:data,
                  label: {
                      normal: {
                         formatter: function(params) {
                                var percent = 0;
                                var total = 0;
                                for (var i = 0; i < data.length; i++) {
                                    total += parseFloat(data[i].value)
                                }
                                if(params.value != 0){
                                   percent = Math.round((params.value / total) * 100);
                                }
                                if(params.name !== '') {
                                   return percent + "%"
                                }else {
                                    return '';
                                }
                              },
                          textStyle: {
                              color: '#717171',
                              fontSize: 14,
                          }
                      }
                  },
                  labelLine: {
                      normal: {
                          show: true,
                          position: 'inner',
                      }
                  },
                  itemStyle: {
                      normal: {
                          borderWidth: 4,
                          borderColor: '#ffffff',
                      },
                      emphasis: {
                          borderWidth: 0,
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.8)'
                      }
                  }
              }],
              color: color,
              backgroundColor: '#fff'
          };
          myChart.setOption(option)
      }


    }

  }
</script>

<style scoped="scoped" lang="stylus">
  .box{
    width: 100%;
    background:#FFFFFF;
    .is-show{
      width:100%;
    }
    .pir-title{
      width:100%;
      color:#7d7d7d;
      font-weight:bold;
      text-align:center;
      font-size:12px;
      line-height:1.5;
      padding-bottom:10px;
    }
    .pirmain{
      width: 100%;
      height: 200px;
    }
    .type-box{
      width:100%;
      margin-top:10px;
      display:flex;
      justify-content:space-around;
      align-items:center;
      .type-item{
        flex-grow:1;
        line-height:1.3;
        text-align:center;
        .type-color{
          display:inline-block;
          background:#C60023;
          width:10px;
          height:10px;
          margin-right:8px;
        }
        .type-text{
          color:#717171;
          font-size:12px;
        }
      }
    }
  }
</style>
